import { Carousel, Modal, Typography } from 'antd';
import ReactECharts from 'echarts-for-react';
import React, { useState ,useEffect} from 'react';
import '@/assets/css/certificates.css'


const { Title } = Typography;

const getDoubleRingChartOption = (levelData: { name: string; value: number }[], typeData: { name: string; value: number }[]) => {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return ({
/*   title: {
    text: '荣誉与证书统计',
    left: 'center'
  }, */
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    bottom: isMobile ? '5%' : undefined,
    top: isMobile ? undefined : 'center',
    left: isMobile ? 'center' : undefined,
    orient: isMobile ? 'horizontal' : 'vertical',
    data: isMobile ? levelData.concat(typeData).map(item => item.name) : levelData.concat(typeData).map(item => item.name),
    formatter: function (name) {
      return name.length > 4 ? name.substring(0, 3) + '...' : name;
    }
  },
  color: [
    '#FFE8A3',  // 明亮金属金
    '#F5D999',  // 柔和暖金
    '#EBCA8F',  // 标准奖杯金
    '#E1BB85',  // 哑光金属金
    '#D7AC7B',  // 古典铜金色
    '#CD9D71',  // 深色古铜金
    '#C38E67',  // 氧化金属金
    '#B97F5D'   // 复古做旧金
],
  series: isMobile ? [
    {
      name: '荣誉级别',
      type: 'pie',
      radius: ['45%', '60%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'inside',
        formatter: '{b}',
        fontSize: '14',
        fontWeight: 'bold',
        color: 'gray'
      }, 
      emphasis: {
        label: {
          show: true,
          fontSize: '14',
          fontWeight: 'bold',
          color: '#fff',
          transition: 'font-size 0.2s ease'
        }
      },
      data: levelData
    }
  ] : [
    {
      name: '荣誉级别',
      type: 'pie',
      radius: ['45%', '60%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}: {c}',
        fontSize: '14',
        fontWeight: 'bold',
        color: '#333'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '14',
          fontWeight: 'bold',
          color: '#fff',
          transition: 'font-size 0.2s ease'
        }
      },
      data: levelData
    },
    {
      name: '证书类型',
      type: 'pie',
      radius: ['0%', '42%'],
      center: ['50%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'inside',
        formatter: '{b}',
        fontSize: '13',
        fontWeight: 'bold',
        color: '#fff'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '13',
          fontWeight: 'bold',
          color: '#fff',
          transition: 'font-size 0.2s ease'
        }
      },
      data: typeData
    }
  ]
});
};




const Certificates = () => {
  const [selectedImage, setSelectedImage] = useState('');
  const [modalVisible, setModalVisible] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);

  interface Certificate {
    img: string;
    title: string;
    type: string;
    date: string;
    description: string;
    level?: '国际级' | '国家级' | '省级' | '校级';
  }
  const certificates: Certificate[] = [
    { img: '/certificates/presentationAward.jpg', title: '2024Best Student Paper Presentation Award at AsiaCarto2024 Hongkong',type:'presentation', date: '2024-12-01', description: '在亚洲地图学会议2024上获得最佳学生论文展示奖', level: '国际级'  },
    { img: '/certificates/copyright3.jpg', title: '2024城市灾害应急场景设计系统',type:'copyright', date: '2024-05-01', description: '城市灾害应急场景设计系统软件著作权', level: '国家级'  },
    { img: '/certificates/test3.jpg', title: '城市灾害应急场景设计系统软件测试报告',type:'test', date: '2024-05-15', description: '城市灾害应急场景设计系统软件测试报告'  },
    { img: '/certificates/copyright4.jpg', title: '2024 城市灾害应急场景可视化系统' ,type:'copyright', date: '2024-06-01', description: '城市灾害应急场景可视化系统软件著作权', level: '国家级' },
    { img: '/certificates/test2.jpg', title: '城市灾害应急场景可视化系统软件测试报告' ,type:'test', date: '2024-06-15', description: '城市灾害应急场景可视化系统软件测试报告'  },
    { img: '/certificates/copyright2.jpg', title: '2024城市灾害应急预案系统' ,type:'copyright', date: '2024-07-01', description: '城市灾害应急场景仿真模拟与应急预案系统软件著作权', level: '国家级' },
    { img: '/certificates/test1.jpg', title: '城市灾害应急预案系统测试报告' ,type:'test', date: '2024-07-15', description: '城市灾害应急场景仿真模拟与应急预案系统测试报告'  },
    { img: '/certificates/copyright5.jpg', title: '2024 城市内涝可视化模拟系统',type:'copyright', date: '2024-08-01', description: '城市内涝可视化模拟系统软件著作权', level: '国家级'  },
    { img: '/certificates/copyright1.jpg', title: '2022非物质文化景观的时空三维展示平台' ,type:'copyright', date: '2022-12-01', description: '非物质文化景观的时空三维展示平台软件著作权', level: '国家级'  },
    { img: '/certificates/internetAward.jpg', title: '2022湖南省互联网+创新大赛 二等奖',type:'contest', date: '2022-12-15', description: '湖南省互联网+创新大赛二等奖', level: '省级'   },
    { img: '/certificates/esriAward.png', title: '2021全国易智瑞软件开发大赛三等奖',type:'contest', date: '2021-12-01', description: '全国易智瑞软件开发大赛三等奖', level: '国家级'  },
    { img: '/certificates/youngAward.png', title: '2021全国青年科普创新实验暨作品大赛全国总决赛',type:'contest', date: '2021-06-01', description: '全国青年科普创新实验暨作品大赛全国总决赛', level: '国家级'    },
    { img: '/certificates/excellentGraduate.jpg', title: '2023湖南省创新创业优秀毕业生',type:'reputation', date: '2023-06-01', description: '湖南省创新创业优秀毕业生', level: '省级' },
    { img: '/certificates/encouragedAward.jpg', title: '2021国家励志奖学金' ,type:'reputation', date: '2021-12-01', description: '国家励志奖学金', level: '国家级'  },
    { img: '/certificates/excellentStudent.jpg', title: '2024南京师范大学优秀研究生',type:'reputation', date: '2024-06-01', description: '南京师范大学优秀研究生', level: '校级'  },
  ];

  const timelineItems = [
    {
      title: 'Best Student Presentation Award at AsianCarto 2024',
      subtitle: '2024.12',
      description: '获奖报告：3D Visualization of Flood Simulation Based on Real-scene Models',
    },
    {
      title: '超图软件开发大赛全国总决赛 三等奖',
      subtitle: '2024.12',
      description: '获奖作品：城市灾害应急管理集成系统',
    },
    {
      title: 'Second Joint Workshop on Empowering Capacity Building for GeoAI Disaster Management',
      subtitle: '2024.05',
      description: '报告内容：The disaster management system integration and programming',
      location: 'ShaoXing, China',
    },
    {
      title: '城市灾害应急管理集成系统的开发与集成 开发与集成进展会议',
      subtitle: '2024.03-2024.09',
      description: '负责开展城市灾害应急场景设计系统、可视化系统与模拟系统的开发、集成与进展汇报',
    },
    {
      title: '2022年湖南省互联网+创新创业大赛 二等奖',
      subtitle: '2022.12',
      description: '获奖作品：赋活村落 守望乡愁，负责项目古村古镇大屏可视化系统开发',
    },
    {
      title: '全国青少年科普大赛暨实验大赛 总决赛三等奖',
      subtitle: '2021.06',
      description: '获奖作品：古建筑在线建模与可视化系统，负责系统前端开发与三维建模',
    },
  ];

const getCertificateStatistics = () => {
  const stats = {
    international: 0,
    national: 0,
    provincial: 1,
    school: 10,
    software: 0,
    report: 2,
    contest:0,
    reputation:10,
  };

  certificates.forEach(cert => {
    if (cert.level === '国际级') stats.international++;
    if (cert.level === '国家级') stats.national++;
    if (cert.level === '省级') stats.provincial++;
    if (cert.level === '校级') stats.school++;
    if (cert.type === 'copyright') stats.software++;
    if(cert.type === 'contest') stats.contest++;
    if(cert.type === 'reputation') stats.reputation++;
  });

  return [
    { name: '国际级', value: stats.international },
    { name: '国家级', value: stats.national },
    { name: '省级', value: stats.provincial },
    { name: '校级', value: stats.school },
    { name: '报告', value: stats.report },
    { name: '软著', value: stats.software },
 
    { name: '竞赛', value: stats.contest },
    { name: '荣誉奖学金', value: stats.reputation}
  ];
};

return (
  <section id="certificates" className='bg-white relative z-10 mt-20'>
    <div className="inner-width">
      <Title level={1} className="section-title">成果&奖项&荣誉</Title>
      <div>
        <ReactECharts
          option={getDoubleRingChartOption(
            getCertificateStatistics().filter(item => ['国际级', '国家级', '省级', '校级'].includes(item.name)),
            getCertificateStatistics().filter(item => ['报告','软著','竞赛', '荣誉奖学金'].includes(item.name))
          )}
          style={{ height: '500px', width: '100%' }}
        />
      </div>
      <div className="honor-badge" style={{
        background: 'white',
        padding: '10px 20px',
        margin: '20px auto',
        maxWidth: '300px',
        textAlign: 'center',
        position: 'relative',
        borderRadius: '4px',
      }}>
        <div style={{
          position: 'absolute',
          left: '10px',
          top: '50%',
          transform: 'translateY(-50%)',
          color: '#8C8C8C',
          fontSize: '24px',
        }}>🏆</div>
        <span style={{
          color: '#FF4D4F',
          fontWeight: 'bold',
          fontSize: '16px',
        }}><img src="/images/CSDN.jpg" alt="CSDN" style={{ width: '80%', height: 'auto', display: 'block', margin: '0 auto' }} /></span>
        <div style={{
          position: 'absolute',
          right: '10px',
          top: '50%',
          transform: 'translateY(-50%) scaleX(-1)',
          color: '#8C8C8C',
          fontSize: '24px',
        }}>🏆</div>
        
      </div>
      
      <Carousel
        autoplay
        dots={{ className: 'cert-dots' }}
        className="cert-carousel"
        beforeChange={(_, next) => setActiveIndex(next)}
        arrows={false}
        slidesToShow={3}
        centerMode={true}
        centerPadding= '20px'
        speed={500}
        responsive={[
          {
            breakpoint: 1200,
            settings: {
              slidesToShow: 2,
              centerPadding: '20px'
            }
          },
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 1,
              centerPadding: '0'
            }
          }
        ]}
      >
        {certificates.map((cert, index) => (
          <div key={index} className="cert-slide">
            <div  className={`cert-container h-[350px] flex flex-col transition-all duration-500 ${index === activeIndex ? 'active scale-125 z-20' : 'scale-90 opacity-50 z-10'}`}
            >
              <img
                src={cert.img}
                alt={cert.title}
                className="cert-image hover-scale w-full h-full object-contain"
                onClick={() => {
                  setSelectedImage(cert.img);
                  setModalVisible(true);
                }}
              />
              <Title 
                level={5} 
                style={{ display: 'block', lineHeight: 1,marginTop: '10px'}}
              >
                {cert.title}
              </Title>
            </div>
          </div>
        ))}
      </Carousel>
    </div>
    <Modal
      open={modalVisible}
      footer={null}
      onCancel={() => setModalVisible(false)}
      max-height="80%"
      centered
    >
      <img
        src={selectedImage}
        alt="放大预览"
        style={{ width: '100%', borderRadius: 8 }}
      />
    </Modal>
  </section>
);
}

export default Certificates;
